<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img class="banner-img" :src="bannerImg"/>
            <div class="banner-info">
                <div class="banner-title">{{this.sightName}}</div>
                <div class="banner-number">
                    <span class="iconfont banner-icon">&#xe7b3;</span>{{this.bannerImgs.length}}
                </div>
            </div>
        </div>
        <fade-animation>
            <common-gallary
               :imgs="bannerImgs"
               v-show="showGallary"
               @close="handleGallaryClose"
             ></common-gallary>
        </fade-animation>
    </div>

</template>
<script>
    import CommonGallary from 'common/gallary/Gallary'
    import FadeAnimation from 'common/fade/FadeAnimation.vue'
    export default {
        name: 'DetailBanner',
        props:{
            sightName:String,
            bannerImg:String,
            bannerImgs:Array,
        },
        components:{
            CommonGallary,
            FadeAnimation
        },
        data(){
          return{
              showGallary:false,
          }
        },
        methods:{
            handleBannerClick(){
                this.showGallary=true
            },
            handleGallaryClose(){
                this.showGallary=false
            }
        }
    }
</script>
<style lang="stylus" scoped>
  .banner
    overflow:hidden
    position:relative
    height:0
    padding-bottom:55%
    .banner-img
      width:100%
    .banner-info
      display:flex
      position:absolute
      left:0
      right:0
      bottom:0
      line-height:.6rem
      color:#000
      background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
      .banner-title
        flex:1
        font-size:.32rem
        padding:0 .2rem
        color:#fff
      .banner-number
        margin-top:.14rem
        padding:0 .4rem
        height:.32rem
        line-height:.32rem
        border-radius:.2rem
        background:rgba(0,0,0,.8)
        font-size:.24rem
        color:#fff
        .banner-icon
          font-size:.24rem
</style>